<template>
    <div id="app">
        <div style="height: 450px">
            <mgs-l-map
                style="width: 49%; float: left"
                :view.sync="view"
                :options="options"
                :plugins="[
                    'analysis',
                    'graphics',
                    'HEGraphic',
                    'graticules',
                    'kilometergrid',
                    'plotting',
                ]"
                :pluginOptions="pluginOptions"
                @onMapInited="initMap"
            />
            <mgs-c-view
                style="width: 49%; float: right"
                :view.sync="view"
                :scale="1"
                :options="options3d"
                :plugins="[
                    'analysis',
                    'graphics',
                    'graticules',
                    'kilometergrid',
                    'plotting',
                ]"
                :pluginOptions="pluginOptions"
                @onMapInited="initMap"
            />
        </div>
        <!-- 地图初始化后渲染 -->
        <template v-for="(comp, idx) in comps">
            <component
                v-if="bindMap"
                :key="idx"
                :is="comp"
                :bindMap="bindMap"
            />
        </template>
    </div>
</template>

<script>
import { CONFIG } from './config'
import L from 'leaflet'
import * as Cesium from 'Cesium'

export default {
    name: 'App',
    data() {
        return {
            view: {
                center: [116.570167, 39.986239],
                zoom: 10,
            },
            options: {
                preferCanvas: true,
                crs: L.CRS.EPSG4326,
            },
            options3d: {
                // sceneMode: Cesium.SceneMode.SCENE2D,
            },
            is3d: location.href.includes('/index3d.html'),
            paths: location.search.slice(1).split(','),
            bindMap: null,

            pluginOptions: {
                analysis: CONFIG.ANALYSIS_CONFIG,
                plotting: {
                    url: 'https://iserver.supermap.io/iserver/services/plot-jingyong/rest/plot/',
                },
            },
        }
    },
    computed: {
        comps() {
            return this.paths
                .map(p => {
                    return p && require('./' + p + '.vue').default
                })
                .filter(c => !!c)
        },
    },
    methods: {
        initMap(baseMap) {
            if (baseMap.MapType === '3D' && this.is3d) {
                this.bindMap = baseMap
            } else if (baseMap.MapType === '2D' && !this.is3d) {
                this.bindMap = baseMap
            }

            // baseMap.addService(
            //     '1',
            //     'arcgisrestmap',
            //     'https://server.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer'
            // )
            baseMap.addService(
                '2',
                'smrestmap',
                'http://192.168.3.181:8090/iserver/services/map-China100/rest/maps/China_4490'
            )
            baseMap.addService(
                '4',
                'smrestmap',
                'http://192.168.3.181:8083/geoesb/proxy/services/maps/rest/265f571f478243829e123da23426dbb4/886e60bb7e014f22a707de23e6f6505d',
                { opacity: 0.4 }
            )
            baseMap.addService(
                '5',
                'smrestmap',
                'http://192.168.3.181:8083/geoesb/proxy/services/maps/rest/17782dbe85c645a49a613d4d3484bc59/886e60bb7e014f22a707de23e6f6505d',
                { opacity: 0.5 }
            )
            // baseMap.addService(
            //     '3',
            //     'smrestmap',
            //     'http://192.168.3.181:8090/iserver/services/map-mongodb/rest/maps/GoogleMap',
            //     { opacity: 0.7 }
            // )

            window['bindMap' + baseMap.MapType] = baseMap
        },
    },
}
</script>

<style lang="scss">
#app {
    margin: 0 auto;

    width: 90%;

    & > div {
        margin-top: 10px;
    }
}
</style>
